<template>
  <div class="container">
      <div class="top-div-center-title">
        <span>总体运行趋势</span>
      </div>
    <div class="map-div">
      <div style="width: 800px;height:800px;" ref="map" @contextmenu.prevent="toback">
      </div>
    </div>
    <div class="data-div">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
          <div v-if="item.name == 'first'">
            <div id="main-top" style="height: 320px; width: 100%"></div>
            <div id="main-bottom" style="height: 500px; width: 100%"></div>
          </div>
          <div v-else>
            <div style="margin-top: 5px;margin-bottom: 5px;">
              <el-input placeholder="请输入内容" class="input-with-select" v-model="keySearch">
                <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
              </el-input>
            </div>
            <el-table :header-cell-style="{ background: '#409eff', color: '#000000' }"
                      @row-click="handleRowClick" @sort-change="handleSortChange"
                      :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe
                      header-align="center" :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column label="审理法院" align="center" prop="审理法院"
                               v-if="item.label == '重大案件风险' || item.label == '违规事件风险' || item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.court }}</span>
                </template>
              </el-table-column>
              <el-table-column label="案号" align="center" prop="案号"
                               v-if="item.label == '重大案件风险' || item.label == '违规事件风险' || item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.caseId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="案件类型" align="center" sortable="custom" width="120" prop="案件类型"
                               v-if="item.label == '重大案件风险' || item.label == '违规事件风险' || item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.caseType }}</span>
                </template>
              </el-table-column>
              <el-table-column label="庭室" align="center" prop="庭室"
                               v-if="item.label == '重大案件风险' || item.label == '违规事件风险' || item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.courtRoom }}</span>
                </template>
              </el-table-column>
              <el-table-column label="裁判日期" align="center" sortable="custom" prop="裁判日期"
                               v-if="item.label == '重大案件风险' || item.label == '违规事件风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="受案时间" width="110" align="center" sortable="custom" prop="受案时间"
                               v-if="item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="案件进展阶段" prop="案件进展阶段" width="110" align="center"
                               v-if="item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.createStep }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重点案件风险" width="130" sortable="custom" align="center" prop="重点案件风险"
                               v-if="item.label == '重大案件风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.risk }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重大事件风险" width="130" sortable="custom" align="center" prop="重大事件风险"
                               v-if="item.label == '违规事件风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.risk }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重要节点风险" width="130" sortable="custom" align="center" prop="重要节点风险"
                               v-if="item.label == '办案节点风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.risk }}</span>
                </template>
              </el-table-column>

              <el-table-column label="自然人姓名" align="center" v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所在法院" align="center" v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeOrg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="庭室" align="center" v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.courtRoom }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任职时间" align="center" sortable="custom" prop="任职时间"
                               v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="职级" align="center" v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeProfession }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重要人员风险" width="130" sortable="custom" align="center" prop="重要人员风险"
                               v-if="item.label == '人员廉政风险'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.risk }}</span>
                </template>
              </el-table-column>


              <el-table-column label="自然人姓名" align="center" v-if="item.label == '动态绩效画像'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所在法院" align="center" v-if="item.label == '动态绩效画像'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeOrg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="任职时间" align="center" sortable="custom" prop="任职时间"
                               v-if="item.label == '动态绩效画像'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="职级" align="center" v-if="item.label == '动态绩效画像'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.judgeProfession }}</span>
                </template>
              </el-table-column>
              <el-table-column label="绩效" sortable="custom" prop="绩效" align="center"
                               v-if="item.label == '动态绩效画像'">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.performance }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="container-footer">
              <el-pagination small background @size-change="handleSizeChange"
                             @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize"
                             layout="pager" :total="tableData.length">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog :visible.sync="infoDialogVisible" width="700px">
      <div style="height:570px;">
        <div style="height:250px;padding-left: 50px;">
          <div style="width:200px;float:left;">
            <div style="width: 100px;height:100px;border-radius: 50%;">
              <img style="width: 100%;height:100%;border-radius: 50%;"
                   src="https://music-android.oss-cn-shanghai.aliyuncs.com/860744d88b7a415d80664cbf205d01ad.png">
            </div>
          </div>
          <div style="width:400px;float:left;" class="info-div">
            <div>
              <div class="label-span">姓名：</div>
              <div class="value-span">{{ userInfo.judgeName }}</div>
            </div>
            <div>
              <div class="label-span">性别：</div>
              <div class="value-span">{{ userInfo.sex }}</div>
            </div>
            <div>
              <div class="label-span">任职时间：</div>
              <div class="value-span">{{
                  userInfo.judgeDate
                }}
              </div>
            </div>
            <div>
              <div class="label-span">案件数量：</div>
              <div class="value-span">{{ userInfo.num }}</div>
            </div>
            <div>
              <div class="label-span">发改率：</div>
              <div class="value-span">{{ userInfo.rate1 }}</div>
            </div>
            <div>
              <div class="label-span">超审限案件率：</div>
              <div class="value-span">{{ userInfo.rate2 }}</div>
            </div>
            <div>
              <div class="label-span">长期未结案件率：</div>
              <div class="value-span">{{
                  userInfo.rate3
                }}
              </div>
            </div>
            <div>
              <div class="label-span">调撤率：</div>
              <div class="value-span">{{ userInfo.rate4 }}</div>
            </div>
            <div>
              <div class="label-span">信访率：</div>
              <div class="value-span">{{ userInfo.rate5 }}</div>
            </div>
          </div>
        </div>
        <div style="height:300px;width:600px;margin:0 auto">
          <div id="user-div" style="height: 300px; width: 600px"></div>
        </div>
        <div style="width:600px;margin:0 auto;text-align: center;">
          注：以上人员绩效数据由案件数量，发改率，超审限案件率等26个参数计算得到
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts";
import hunan from "@/json/湖南省/湖南省.json";
import changde from "@/json/湖南省/常德市.json";
import chenzhou from "@/json/湖南省/郴州市.json";
import hengyang from "@/json/湖南省/衡阳市.json";
import huaihua from "@/json/湖南省/怀化市.json";
import loudi from "@/json/湖南省/娄底市.json";
import shaoyang from "@/json/湖南省/邵阳市.json";
import xiangtan from "@/json/湖南省/湘潭市.json";
import xiangxizuzhizhou from "@/json/湖南省/湘西土家族苗族自治州.json";
import yiyang from "@/json/湖南省/益阳市.json";
import yongzhou from "@/json/湖南省/永州市.json";
import yueyang from "@/json/湖南省/岳阳市.json";
import zhangjiajie from "@/json/湖南省/张家界市.json";
import changsha from "@/json/湖南省/长沙市.json";
import zhuzhou from "@/json/湖南省/株洲市.json";

import dayjs from 'dayjs'
import * as XLSX from 'xlsx';
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      now: new Date(),
      timer: null,
      tabLabel: '',
      keySearch: '',
      currentPage: 1,
      pagesize: 8,
      excelData: [],
      dataVO: {
        KeyCaseVO: [],
        MajorViolationVO: [],
        ImportCaseHandleVO: [],
        ImportantPersonVO: [],
        DynamicPerformanceVO: []
      },
      role: '院长',
      timeId: null,
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      day: dayjs().format('YYYY-MM-DD'),
      time: dayjs().add(1, 'second').format('HH:mm:ss'),
      week: dayjs().day(),
      userInfo: {
        judgeName: '',
        sex: '',
        judgeDate: '',
        num: '',
        rate1: '',
        rate2: '',
        rate3: '',
        rate4: '',
        rate5: ''
      },
      infoDialogVisible: false,
      tabs: [
        {
          label: "",
          name: "first"
        },
        // {
        //   label: "重大案件风险",
        //   name: "second"
        // },
        // {
        //   label: "违规事件风险",
        //   name: "third"
        // },
        // {
        //   label: "办案节点风险",
        //   name: "fourth"
        // },
        // {
        //   label: "人员廉政风险",
        //   name: "fifth"
        // },
        // {
        //   label: "动态绩效画像",
        //   name: "sixth"
        // }
      ],
      map: [],
      links: [],
      linkNames: [],
      mapName: '',
      zoom: 1.2,
      myChart: null,
      activeName: 'first',
      tableData: [],
      dto: {
        key: '',
        type: null,
        tabs: ''
      }
    };
  },

  watch: {
    links: {
      handler(val) {
        if (!val.length) return;
        this.initParamsCity(val[val.length - 1]); // 始终渲染最后一个数据
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    dWeek() {
      return this.weeks[this.week + 0]
    },
    formattedDateTime() {
      const {now} = this;
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    }
  },
  methods: {
    handleSortChange({column, prop, order}) {
      console.log(`排序字段: ${prop}, 排序方向: ${order}`);
      // 在这里实现自定义排序逻辑
      // 例如: 根据日期和姓名字段进行排序
      this.tableData.sort((a, b) => {
        let result = 0;
        if (prop === '重点案件风险' || prop === '重大事件风险' || prop === '重要节点风险' || prop === '重要人员风险') {
          result = a.risk < b.risk ? -1 : a.risk > b.risk ? 1 : 0;
        } else if (prop === '绩效') {
          result = a.performance < b.performance ? -1 : a.performance > b.performance ? 1 : 0;
        } else if (prop === '裁判日期') {
          result = a.judgeDate < b.judgeDate ? -1 : a.judgeDate > b.judgeDate ? 1 : 0;
        } else if (prop === '受案时间') {
          result = a.createDate < b.createDate ? -1 : a.createDate > b.createDate ? 1 : 0;
        } else if (prop === '案件类型') {
          result = a.caseType.localeCompare(b.caseType, undefined, {sensitivity: 'base'});
        }
        return order === 'ascending' ? result : -result;
      });
    },
    doSearch() {
      switch (this.tabLabel) {
        case '重大案件风险':
          this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
              caseItem.court.includes(this.keySearch));
          break;
        case '违规事件风险':
          this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
              caseItem.court.includes(this.keySearch));
          break;
        case '办案节点风险':
          this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
              caseItem.court.includes(this.keySearch));
          break;
        case '人员廉政风险':
          this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
              caseItem.judgeName.includes(this.keySearch));
          break;
        case '动态绩效画像':
          this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
              caseItem.judgeName.includes(this.keySearch));
          break;
        default:
      }
    },
    readExcelFile() {
      axios.get('/excelData1.xlsx', {responseType: 'arraybuffer'})
          .then((res) => {
            let data = new Uint8Array(res.data)
            let wb = XLSX.read(data, {type: "array"})
            let sheets = wb.Sheets
            this.transformSheets1(sheets)
          }).catch(err => {
        this.err = err
      })
      axios.get('/excelData2.xlsx', {responseType: 'arraybuffer'})
          .then((res) => {
            let data = new Uint8Array(res.data)
            let wb = XLSX.read(data, {type: "array"})
            let sheets = wb.Sheets
            this.transformSheets2(sheets)
          }).catch(err => {
        this.err = err
      })
    },
    transformSheets1(sheets) {
      let excelData = []

      for (let key in sheets) {
        excelData = XLSX.utils.sheet_to_json(sheets[key])
      }
      let KeyCaseVO = []
      let MajorViolationVO = []
      let ImportCaseHandleVO = []
      excelData.forEach(obj => {
        let keyCaseItem = {
          "province": obj.province,
          "city": obj.city,
          "county": obj.county,
          "court": obj.court,
          "caseId": obj.caseId,
          "caseType": obj.caseType,
          "courtRoom": obj.courtRoom,
          "judgeDate": obj.judgeDate,
          "risk": obj.risk1
        }
        let MajorViolationItem = {
          "province": obj.province,
          "city": obj.city,
          "county": obj.county,
          "court": obj.court,
          "caseId": obj.caseId,
          "caseType": obj.caseType,
          "courtRoom": obj.courtRoom,
          "judgeDate": obj.judgeDate,
          "risk": obj.risk2
        }
        let ImportCaseHandleItem = {
          "province": obj.province,
          "city": obj.city,
          "county": obj.county,
          "court": obj.court,
          "caseId": obj.caseId,
          "caseType": obj.caseType,
          "courtRoom": obj.courtRoom,
          "createDate": obj.createDate,
          "createStep": obj.createStep,
          "risk": obj.risk3
        }
        KeyCaseVO.push(keyCaseItem)
        MajorViolationVO.push(MajorViolationItem)
        ImportCaseHandleVO.push(ImportCaseHandleItem)
      })
      this.dataVO.KeyCaseVO = KeyCaseVO
      this.dataVO.MajorViolationVO = MajorViolationVO
      this.dataVO.ImportCaseHandleVO = ImportCaseHandleVO
    },
    transformSheets2(sheets) {
      let excelData = []
      for (let key in sheets) {
        excelData = XLSX.utils.sheet_to_json(sheets[key])
      }
      let ImportantPersonVO = []
      let DynamicPerformanceVO = []
      excelData.forEach(obj => {
        let ImportantPersonItem = {
          "province": obj.province,
          "city": obj.city,
          "county": obj.county,
          "judgeName": obj.judgeName,
          "judgeOrg": obj.judgeOrg,
          "courtRoom": obj.courtRoom,
          "judgeDate": obj.judgeDate,
          "judgeProfession": obj.judgeProfession,
          "risk": obj.risk
        }
        let DynamicPerformanceItem = {
          "province": obj.province,
          "city": obj.city,
          "county": obj.county,
          "judgeName": obj.judgeName,
          "judgeOrg": obj.judgeOrg,
          "courtRoom": obj.courtRoom,
          "judgeDate": obj.judgeDate,
          "judgeProfession": obj.judgeProfession,
          "performance": obj.performance,
          "sex": obj.sex,
          "num": obj.num,
          "rate1": obj.rate1 * 100 + '%',
          "rate2": obj.rate2 * 100 + '%',
          "rate3": obj.rate3 * 100 + '%',
          "rate4": obj.rate4 * 100 + '%',
          "rate5": obj.rate5 * 100 + '%',
        }

        ImportantPersonVO.push(ImportantPersonItem)
        DynamicPerformanceVO.push(DynamicPerformanceItem)
      })
      this.dataVO.ImportantPersonVO = ImportantPersonVO
      this.dataVO.DynamicPerformanceVO = DynamicPerformanceVO
    },
    handleScroll(event) {
      event.preventDefault();
      const delta = event.deltaY > 0 ? -0.1 : 0.1;
      this.zoom = Math.max(1, Math.min(4, this.zoom + delta));
      this.myChart.setOption({
        series: [{zoom: this.zoom}],
      });
    },
    handleClick(tab, event) {
      this.tabLabel = tab.label
      switch (this.tabLabel) {
        case '重大案件风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '违规事件风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '办案节点风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '人员廉政风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '动态绩效画像':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        default:
      }
    },
    initParamsCity(name) {
      const map = {
        湖南省: hunan,
        常德市: changde,
        郴州市: chenzhou,
        衡阳市: hengyang,
        怀化市: huaihua,
        娄底市: loudi,
        邵阳市: shaoyang,
        湘潭市: xiangtan,
        湘西土家族苗族自治州: xiangxizuzhizhou,
        益阳市: yiyang,
        永州市: yongzhou,
        岳阳市: yueyang,
        张家界市: zhangjiajie,
        长沙市: changsha,
        株洲市: zhuzhou
      };
      echarts.registerMap("mapJson", {
        geoJSON: map[name],
      });

      if (this.myChart) this.myChart.dispose();
      this.myChart = echarts.init(this.$refs.map);
      var option = {
        visualMap: {
          show: false,
          min: 1111,
          max: 333332,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            type: 'map',
            map: 'mapJson',
            label: {
              show: true,
              textStyle: {
                color: 'white',
                fontSize: 16,
              }
            },
            zoom: this.zoom,
            data: [
              {name: "长沙市", value: 11111},
              {name: "株洲市", value: 22222},
              {name: "湘潭市", value: 33333},
              {name: "衡阳市", value: 44444},
              {name: "邵阳市", value: 55555},
              {name: "岳阳市", value: 66666},
              {name: "常德市", value: 77777},
              {name: "张家界市", value: 88888},
              {name: "益阳市", value: 99999},
              {name: "郴州市", value: 111111},
              {name: "永州市", value: 122222},
              {name: "怀化市", value: 133333},
              {name: "娄底市", value: 144444},
              {name: "湘西土家族苗族自治州", value: 155555},
              {name: "武陵区", value: 11111},
              {name: "鼎城区", value: 22222},
              {name: "安乡县", value: 33333},
              {name: "汉寿县", value: 44444},
              {name: "桃源县", value: 55555},
              {name: "临澧县", value: 66666},
              {name: "石门县", value: 77777},
              {name: "澧县", value: 88888},
              {name: "津市市", value: 99999},
              {name: "北湖区", value: 11111},
              {name: "苏仙区", value: 22222},
              {name: "桂阳县", value: 33333},
              {name: "宜章县", value: 44444},
              {name: "永兴县", value: 55555},
              {name: "嘉禾县", value: 66666},
              {name: "临武县", value: 77777},
              {name: "汝城县", value: 88888},
              {name: "桂东县", value: 99999},
              {name: "安仁县", value: 111111},
              {name: "资兴市", value: 122222},
              {name: "雁峰区", value: 11111},
              {name: "石鼓区", value: 22222},
              {name: "珠晖区", value: 33333},
              {name: "蒸湘区", value: 44444},
              {name: "南岳区", value: 55555},
              {name: "衡阳县", value: 66666},
              {name: "衡南县", value: 77777},
              {name: "衡山县", value: 88888},
              {name: "衡东县", value: 99999},
              {name: "祁东县", value: 111111},
              {name: "耒阳市", value: 122222},
              {name: "常宁市", value: 133333},
              {name: "鹤城区", value: 11111},
              {name: "中方县", value: 22222},
              {name: "洪江市", value: 33333},
              {name: "沅陵县", value: 44444},
              {name: "辰溪县", value: 55555},
              {name: "溆浦县", value: 66666},
              {name: "会同县", value: 77777},
              {name: "麻阳苗族自治县", value: 88888},
              {name: "新晃侗族自治县", value: 99999},
              {name: "芷江侗族自治县", value: 111111},
              {name: "靖州苗族侗族自治县", value: 122222},
              {name: "通道侗族自治县", value: 133333},
              {name: "娄星区", value: 11111},
              {name: "冷水江市", value: 22222},
              {name: "涟源市", value: 33333},
              {name: "双峰县", value: 44444},
              {name: "新化县", value: 55555},
              {name: "双清区", value: 11111},
              {name: "大祥区", value: 22222},
              {name: "北塔区", value: 33333},
              {name: "邵东市", value: 44444},
              {name: "新邵县", value: 55555},
              {name: "邵阳县", value: 66666},
              {name: "隆回县", value: 77777},
              {name: "洞口县", value: 88888},
              {name: "绥宁县", value: 99999},
              {name: "新宁县", value: 111111},
              {name: "城步苗族自治县", value: 122222},
              {name: "武冈市", value: 133333},
              {name: "雨湖区", value: 11111},
              {name: "岳塘区", value: 22222},
              {name: "湘潭县", value: 33333},
              {name: "湘乡市", value: 44444},
              {name: "韶山市", value: 55555},
              {name: "吉首市", value: 11111},
              {name: "泸溪县", value: 22222},
              {name: "凤凰县", value: 33333},
              {name: "花垣县", value: 44444},
              {name: "保靖县", value: 55555},
              {name: "古丈县", value: 66666},
              {name: "永顺县", value: 77777},
              {name: "龙山县", value: 88888},
              {name: "资阳区", value: 11111},
              {name: "赫山区", value: 22222},
              {name: "沅江市", value: 33333},
              {name: "桃江县", value: 44444},
              {name: "南县", value: 55555},
              {name: "安化县", value: 66666},
              {name: "零陵区", value: 11111},
              {name: "冷水滩区", value: 22222},
              {name: "祁阳市", value: 33333},
              {name: "东安县", value: 44444},
              {name: "双牌县", value: 55555},
              {name: "道县", value: 66666},
              {name: "江永县", value: 77777},
              {name: "宁远县", value: 88888},
              {name: "蓝山县", value: 99999},
              {name: "新田县", value: 111111},
              {name: "江华瑶族自治县", value: 122222},
              {name: "岳阳楼区", value: 11111},
              {name: "云溪区", value: 22222},
              {name: "君山区", value: 33333},
              {name: "汨罗市", value: 44444},
              {name: "临湘市", value: 55555},
              {name: "岳阳县", value: 66666},
              {name: "华容县", value: 77777},
              {name: "湘阴县", value: 88888},
              {name: "平江县", value: 99999},
              {name: "永定区", value: 11111},
              {name: "武陵源区", value: 22222},
              {name: "慈利县", value: 33333},
              {name: "桑植县", value: 44444},
              {name: "芙蓉区", value: 11111},
              {name: "天心区", value: 22222},
              {name: "岳麓区", value: 33333},
              {name: "开福区", value: 44444},
              {name: "雨花区", value: 55555},
              {name: "望城区", value: 66666},
              {name: "长沙县", value: 77777},
              {name: "浏阳市", value: 88888},
              {name: "宁乡市", value: 99999},
              {name: "荷塘区", value: 11111},
              {name: "芦淞区", value: 22222},
              {name: "石峰区", value: 33333},
              {name: "天元区", value: 44444},
              {name: "渌口区", value: 55555},
              {name: "攸县", value: 66666},
              {name: "茶陵县", value: 77777},
              {name: "炎陵县", value: 88888},
              {name: "醴陵市", value: 99999}

            ]
          },
        ]
      };
      this.myChart.setOption(option);
      this.myChart.on("click", (params) => {
        // if (this.linkNames.length == 1) {
        //   this.links.push(params.name);
        //   this.linkNames.push(params.name);
        // } else if (this.linkNames.length == 2) {
        //   this.linkNames.push(params.name);
        // } else if (this.linkNames.length == 3) {
        //   this.linkNames.splice(2, 1, params.name);
        // }
        switch (this.tabLabel) {
          case '重大案件风险':
            if (this.linkNames.length == 1) {
              this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                  caseItem.province === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 2) {
              this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                  caseItem.city === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 3) {
              this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                  caseItem.county === this.linkNames[this.linkNames.length - 1]);
            }
            break;
          case '违规事件风险':
            if (this.linkNames.length == 1) {
              this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                  caseItem.province === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 2) {
              this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                  caseItem.city === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 3) {
              this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                  caseItem.county === this.linkNames[this.linkNames.length - 1]);
            }
            break;
          case '办案节点风险':
            if (this.linkNames.length == 1) {
              this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                  caseItem.province === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 2) {
              this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                  caseItem.city === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 3) {
              this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                  caseItem.county === this.linkNames[this.linkNames.length - 1]);
            }
            break;
          case '人员廉政风险':
            if (this.linkNames.length == 1) {
              this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                  caseItem.province === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 2) {
              this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                  caseItem.city === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 3) {
              this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                  caseItem.county === this.linkNames[this.linkNames.length - 1]);
            }
            break;
          case '动态绩效画像':
            if (this.linkNames.length == 1) {
              this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                  caseItem.province === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 2) {
              this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                  caseItem.city === this.linkNames[this.linkNames.length - 1]);
            } else if (this.linkNames.length == 3) {
              this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                  caseItem.county === this.linkNames[this.linkNames.length - 1]);
            }
            break;
          default:
        }
      });
    },
    toback() {
      if (this.linkNames.length == 1) {
        this.readExcelFile()
      } else {
        this.links.pop()
        this.linkNames.pop()
      }
      switch (this.tabLabel) {
        case '重大案件风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.KeyCaseVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '违规事件风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.MajorViolationVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '办案节点风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.ImportCaseHandleVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '人员廉政风险':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.ImportantPersonVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        case '动态绩效画像':
          if (this.linkNames.length == 1) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.province === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 2) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.city === this.linkNames[this.linkNames.length - 1]);
          } else if (this.linkNames.length == 3) {
            this.tableData = this.dataVO.DynamicPerformanceVO.filter(caseItem =>
                caseItem.county === this.linkNames[this.linkNames.length - 1]);
          }
          break;
        default:
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
    },
    getFirstDataList() {
      var chartDom = document.getElementById('main-top');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          textStyle: {
            color: '#000000',
            fontSize: 16
          },
          data: ['已结案', '未结案']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              color: '#000000',
              fontSize: 16
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '全省案件',
            nameTextStyle: {
              color: '#000000',
              fontSize: 16
            },
            axisLabel: {
              color: '#000000',
              fontSize: 16
            },
            interval: 5
          },
          {
            axisLabel: {
              color: '#000000',
              fontSize: 16
            },
            type: 'value',
            interval: 5
          }
        ],
        series: [
          {
            name: '已结案',
            type: 'bar',
            data: [
              20, 10, 6, 13, 15, 17, 19, 31
            ]
          },
          {
            name: '未结案',
            type: 'bar',
            data: [
              24, 12, 16, 15, 17, 12, 21, 41
            ]
          },
          {
            name: '已结案',
            type: 'line',
            yAxisIndex: 1,
            data: [
              20, 10, 6, 13, 15, 17, 19
            ]
          },
          {
            name: '未结案',
            type: 'line',
            yAxisIndex: 1,
            data: [
              24, 12, 16, 15, 17, 12, 21
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    },
    getSecondDataList() {
      var chartDom = document.getElementById('main-bottom');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#000000',
            fontSize: 16
          },
          data: ['已结案', '未结案']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          nameTextStyle: {
            color: '#000000',
            fontSize: 16
          },
          axisLabel: {
            color: '#000000',
            fontSize: 16
          },
        },
        yAxis: {
          type: 'category',
          name: '当月的',
          nameTextStyle: {
            color: '#000000',
            fontSize: 16
          },
          axisLabel: {
            color: '#000000',
            fontSize: 16
          },
          data: [
            '常德市',
            '郴州市',
            '衡阳市',
            '怀化市',
            '娄底市',
            '邵阳市',
            '湘潭市',
            '湘西土家族苗族自治州',
            '益阳市',
            '永州市',
            '岳阳市',
            '张家界市',
            '长沙市',
            '株洲市'
          ]
        },
        series: [
          {
            name: '已结案',
            type: 'bar',
            data: [
              14, 52, 15, 6, 13, 15, 20, 10, 6, 13, 15, 17, 19, 31
            ]
          },
          {
            name: '未结案',
            type: 'bar',
            data: [
              13, 15, 17, 6, 13, 15, 24, 12, 16, 15, 17, 12, 21, 41
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    },
    handleRowClick(row, column, event) {
      console.log(this.activeName)

      if (this.activeName === 'sixth') {

        this.userInfo.judgeName = row.judgeName
        this.userInfo.sex = row.sex
        this.userInfo.judgeDate = row.judgeDate
        this.userInfo.num = row.num
        this.userInfo.rate1 = row.rate1
        this.userInfo.rate2 = row.rate2
        this.userInfo.rate3 = row.rate3
        this.userInfo.rate4 = row.rate4
        this.userInfo.rate5 = row.rate5

        this.$nextTick(() => {
          var chartDom = document.getElementById('user-div');
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            xAxis: {
              type: 'category',
              name: '月',
              nameTextStyle: {
                color: '#000000',
                fontSize: 16
              },
              axisLabel: {
                color: '#000000',
                fontSize: 16,

              },
              data: ['1月', '2月', '3月', '4月', '5月'],
            },
            yAxis: {
              type: 'value',
              name: '绩效',
              nameTextStyle: {
                color: '#000000',
                fontSize: 16
              },
              axisLabel: {
                color: '#000000',
                fontSize: 16,

              }
            },
            series: [
              {

                data: [57, 67, 48, 79, row.performance],
                type: 'line',
                smooth: true

              }
            ]
          };
          option && myChart.setOption(option);
        })
        this.infoDialogVisible = true

      } else if (this.activeName === 'third') {
        this.$router.push(
            {
              path: '/kt2Info'
            }
        )
      } else if (this.activeName === 'fourth') {
        console.log('1234')
        this.$router.push(
            {
              path: '/kt3Info'
            }
        )
      } else if (this.activeName === 'second') {
        window.location.href = 'https://laic.cjbdi.com/spqjd/caseDetail.html';
      } else if (this.activeName === 'fifth') {
        window.location.href = 'https://ext.dcloud.net.cn/plugin?id=11582';
      }

    },
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.now = new Date();
    }, 1000);
    this.links.push("湖南省");
    this.linkNames.push("湖南省");
    this.getFirstDataList()
    this.getSecondDataList()
    this.readExcelFile()
  },
};
</script>

<style scoped>
.map-div {
  width: 900px;
  height: 100%;
  float: left;
  border-radius: 3px;
  transition: .2s;
  margin-left: 50px;
  padding: 10px;
}

.data-div {
  width: 700px;
  height: 100%;
  float: left;
  border-radius: 3px;
  transition: .2s;
}


::v-deep .el-tabs {
  width: 700px;
}

.container {
  min-width: 1200px;
  height: 100%;
  display: block;
  clear: both;
  margin: 0 auto;

}

.clearfix:after {
  clear: both
}

::v-deep .el-tabs__item {
  width: 100px;
  padding: 0 5px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  position: relative;
}

::v-deep .el-tabs__content {
  color: #fff;
}

::v-deep .el-tabs__item:hover {
  color: #409EFF;
  cursor: pointer;
}

::v-deep .el-tabs__item.is-active {
  color: #409EFF;
}

.box-card {
  width: 480px;
}

.warning-row {
  background-color: #f0f0f0;
  /* 第一行的颜色 */
}

.success-row {
  background-color: #e0e0e0;
  /* 第二行的颜色 */
}

.top-bar-container {
  display: flex;
  /* 添加这一行启用Flexbox布局 */
  justify-content: space-between;
  /* 使左侧和右侧元素贴边，中间自适应 */
  align-items: center;
  /* 使所有子元素垂直居中 */
  height: 56px;
  text-align: center;
}


.top-div-left-title {
  width: 400px;
  height: 56px;
  margin-left: 10px;
}

.top-div-left-title span {
  font-size: 20px;
  color: #000000;
  line-height: 50px;
  margin-left: 10px;
}

.top-div-right-title {
  width: 350px;
  height: 56px;
}

.top-div-right-title span {
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  line-height: 50px;
  margin-left: 20px;
}

.top-div-center-title {
  width: 300px;
  height: 20px;
  margin: 0 auto;
  text-align: center;

}

.top-div-center-title span {
  font-size: 32px;
  color: #000000;
  font-weight: 500;
}

.container-footer {
  text-align: center;
  width: 700px;
  height: 30px;
  display: block;
  clear: both;
}

/deep/ .el-pagination span {
  background: #0e1e3e;
  border: 1px solid #0e1e3e;
  color: #000000;
  padding: 0 5px;
  line-height: 2;
  border-radius: 4px;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #0e1e3e;
  color: #fff;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0e1e3e;
  color: #fff;
}

/deep/ [data-v-03f0b52e] .el-tabs__item {
  width: 100px;
  padding: 0 5px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  position: relative;
}

/deep/ .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #e4e7ed;
  z-index: 1;
  transition: transform .3s cubic-bezier(.645,.045,.355,1);
  list-style: none;
}


.info-div div {
  height: 28px;
  font-weight: 600;
}

.label-span {
  width: 120px;
  float: left;
}

.value-span {
  margin-left: 20px;
  float: left;
}
</style>